@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwlxdr.ttf) format('truetype');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7g.ttf) format('truetype');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 600;
  src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwlxdr.ttf) format('truetype');
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 300;
  src: local('Noto Serif SC Light'), local('NotoSerifSC-Light'), url(https://fonts.gstatic.com/s/notoserifsc/v7/H4c8BXePl9DZ0Xe7gG9cyOj7mgq0ezdLEA.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  src: local('Noto Serif SC'), local('NotoSerifSC-Regular'), url(https://fonts.gstatic.com/s/notoserifsc/v7/H4chBXePl9DZ0Xe7gG9cyOj7kqGWbQ.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 600;
  src: local('Noto Serif SC SemiBold'), local('NotoSerifSC-SemiBold'), url(https://fonts.gstatic.com/s/notoserifsc/v7/H4c8BXePl9DZ0Xe7gG9cyOj7mn6yezdLEA.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Noto Serif SC'), local('NotoSerifSC-Regular'), url(https://fonts.gstatic.com/s/notoserifsc/v7/H4chBXePl9DZ0Xe7gG9cyOj7koSWbQ.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Noto Serif SC Bold'), local('NotoSerifSC-Bold'), url(https://fonts.gstatic.com/s/notoserifsc/v7/H4c8BXePl9DZ0Xe7gG9cyOj7mhqzexJLEA.otf) format('opentype');
}
* {
  padding: 0 ;
  margin: 0 ;
  font-family: "Noto Serif SC", "HiraMinProN-W6", "Source Han Serif CN", "Source Han Serif SC", "Source Han Serif TC", serif;
}
body::before {
  content: "";
  display: block;
  width: 100vw ;
  height: 100vh ;
  background: url("../img/bg-7.png") no-repeat;
  background-size: cover;
}
body .lightCover {
  position: fixed;
  top: 0px;
  left: 0px;
  outline: 5000px solid rgba(0, 0, 0, 0);
  z-index: 1 !important;
}
.canvas1,
.canvas2 {
  position: fixed;
  width: 100vw ;
  height: 50vh ;
  background: rgba(0, 0, 0, 0.9);
  transition: 0.9s;
  box-sizing: border-box;
}
.canvas1 {
  top: 0 ;
}
.canvas2 {
  bottom: 0 ;
}
.wave {
  position: fixed;
  top: calc((100% - 30px)/2);
  left: calc((100% - 30px)/2);
  width: 30px;
  height: 30px;
  border-radius: 300px;
  background: url("../img/bg-7-1.png");
  background: rgba(250, 177, 160, 0.1);
  opacity: 0.1;
  background-attachment: fixed;
  background-position: center center;
  transform: rotateX(75deg);
  filter: blur(80px);
}
.light-bg {
  position: fixed;
  width: 150px ;
  height: 80px ;
  margin-left: -75px;
  margin-top: -35px;
  left: 50vw ;
  top: 50vh ;
  border-radius: 50% ;
  border-bottom-left-radius: 0 ;
  border-bottom-right-radius: 0 ;
  background: radial-gradient(#fab1a0, transparent 70%);
  transform: rotateX(60deg);
  filter: blur(20px);
}
.sakura {
  position: fixed;
  width: 110px ;
  height: 100px ;
  left: 50vw ;
  top: 50vh ;
  margin-left: -55px;
  margin-top: -50px;
  background-image: url("../img/sakura_single.png");
  background-size: contain ;
  background-repeat: no-repeat;
  z-index: 2 ;
  cursor: pointer;
}
.premise {
  display: inline-block;
  position: fixed;
  top: 60% ;
  left: 50% ;
  margin-left: -116px;
  font-size: 34px ;
  font-weight: 900 ;
  letter-spacing: 1.3px;
  transform: scale(0.9, 1.1);
  color: #f7fcfe;
  user-select: none;
  background-image: linear-gradient(45deg, #203744, #f7fcfe 40px, #f7fcfe 70%, #9ea1a3);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  cursor: pointer;
}
.premise::before {
  content: "——";
  display: inline-block;
  position: absolute;
  height: 2em ;
  width: auto;
  left: -100px;
  font-size: 34px ;
  font-weight: 900 ;
  background-image: linear-gradient(90deg, #f7fcfe, #fdeff2);
  -webkit-background-clip: text;
  background-clip: text;
  opacity: 1 ;
}
.premise::after {
  content: "——";
  display: inline-block;
  position: absolute;
  height: 2em ;
  width: auto;
  right: -100px;
  font-size: 34px ;
  font-weight: 900 ;
  background-image: linear-gradient(-90deg, #f7fcfe, #fdeff2);
  -webkit-background-clip: text;
  background-clip: text;
  opacity: 1 ;
}
main {
  position: fixed;
  left: 0 ;
  top: 0 ;
  box-sizing: border-box;
  z-index: 5 ;
  margin: 0 ;
  padding: 0 ;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh ;
  width: 100vw ;
  transition: 0.9s;
  transform: scale(0);
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
}
main .box {
  position: relative;
  width: 230px ;
  height: 400px ;
  background: transparent;
  transform: rotate(-48deg) skewY(25deg) scale(0.6);
  transition: 0.5s;
  box-shadow: -25px 40px 4px rgba(0, 0, 0, 0.2);
  opacity: 0 ;
  display: flex;
  flex-direction: row;
}
main .box .glass {
  position: absolute;
  top: 0 ;
  left: 0 ;
  width: 100% ;
  height: 100% ;
  background: rgba(255, 255, 255, 0.001);
  transition: 0.5s;
  overflow: hidden;
}
main .box .glass::before {
  content: "";
  position: absolute;
  top: 0 ;
  left: -50%;
  width: 100% ;
  height: 100% ;
  background: rgba(0, 0, 0, 0.005);
  transform: skewX(0deg);
}
main .box:hover {
  transform: rotate(-48deg) skewY(25deg) scale(0.6) translate(20px, -20px);
  box-shadow: -60px 100px 6px rgba(0, 0, 0, 0.05);
}
main .box:hover .glass {
  top: -40px;
  left: 30px ;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.2);
}
main .box:hover .glass:nth-child(2) {
  top: -80px;
  left: 60px ;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.2);
}
main .box::before {
  content: "";
  position: absolute;
  top: 0 ;
  left: -5.5px;
  height: 100% ;
  width: 6px ;
  box-sizing: border-box;
  background: #fdeff2;
  transform-origin: right;
  transform: skewY(-58deg);
}
main .box::after {
  content: "";
  position: absolute;
  bottom: -9.5px;
  left: 0px ;
  height: 10px ;
  width: 100% ;
  box-sizing: border-box;
  background: #e4d2d8;
  transform-origin: top;
  transform: skewX(-32deg);
}
main .card-fake {
  position: absolute;
  width: 100% ;
  height: 100% ;
  background: #f5f6fa;
  z-index: -1;
  border-radius: 10px ;
  transition: 0.3s;
  transform-origin: left;
}
main .card {
  position: absolute;
  width: 100% ;
  height: 100% ;
  color: transparent;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  user-select: none;
  overflow: hidden;
  background: #fff;
  transition: 0.5s;
}
main .card .card-title {
  position: relative;
  font-size: 28px ;
  font-weight: 900 ;
  letter-spacing: 1.3px;
  text-shadow: 0px 0px 5px rgba(99, 110, 114, 0.5);
}
main .card .discript {
  text-align: center;
  margin-top: 20px ;
  font-size: 12px ;
  line-height: 2em ;
  text-shadow: 0px 0px 5px rgba(99, 110, 114, 0.2);
}
main .card span {
  position: absolute;
  background: #ffffff;
  transform: translate(-50%, -50%);
  pointer-events: none;
  border-radius: 50% ;
  animation: sp-float 1s linear infinite;
}
main form {
  position: absolute;
  width: 160% ;
  height: 100% ;
  left: 100% ;
  padding-top: 60px ;
  box-sizing: border-box;
  background: #f5f6fa;
  transition: 0.5s;
  transform-origin: left;
  transform: scaleX(0);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
main form::-webkit-scrollbar {
  display: none;
}
main form .inputBox {
  position: relative;
  width: 75% ;
  margin-top: 10px ;
  transform-style: preserve-3d;
}
main form .inputBox input,
main form .inputBox textarea {
  background: transparent;
  position: relative;
  width: 100% ;
  padding: 5px 0 ;
  padding-bottom: 0 ;
  font-size: 12px ;
  line-height: 16px ;
  margin: 10px 0 ;
  border: none;
  outline: none;
  resize: none;
}
main form .inputBox::before {
  content: "";
  position: absolute;
  left: 0 ;
  bottom: 0px;
  height: 2px ;
  width: 100% ;
  background: #2d3436;
}
main form .inputBox::after {
  content: "";
  position: absolute;
  left: 0 ;
  bottom: 0px;
  height: 2px ;
  width: 100% ;
  transition: 0.3s;
  transform-origin: center;
  transform: scaleX(0);
  background: #00b894;
}
main form .inputBox textarea {
  height: 100px ;
}
main form .inputBox span {
  position: absolute;
  left: 0 ;
  top: 0 ;
  padding: 5px 0 ;
  font-size: 14px ;
  margin: 10px 0 ;
  transition: 0.5s;
  color: #666;
  user-select: none;
  z-index: -1;
}
main form .inputBox input:focus ~ span,
main form .inputBox input:valid ~ span,
main form .inputBox textarea:focus ~ span,
main form .inputBox textarea:valid ~ span {
  color: #e91e63;
  font-size: 12px ;
  transform: translateY(-20px);
}
main form .inputBox:hover::after {
  transform: scaleX(1);
}
main form .my-login {
  margin-top: 50px ;
  min-height: 40px;
  width: 50% ;
  font-size: 14px;
  letter-spacing: 1.5px;
  font-weight: 400 ;
  border-radius: 20px ;
  border: 1.5px solid #e17055;
  background: transparent;
  cursor: pointer;
  transition: 0.3s;
  font-family: "Josefin Sans Light", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "'Hiragino Sans GB", STHeiti, "Microsoft Yahei", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", Arial, Verdana, sans-serif;
}
main form .my-login:hover {
  background: #e17055;
  color: #f5f6fa;
  box-shadow: 0px 0px 10px #fab1a0;
}
main form .my-regis {
  margin-top: 50px ;
  min-height: 40px;
  width: 50% ;
  font-size: 14px;
  letter-spacing: 1.5px;
  font-weight: 400 ;
  border-radius: 20px ;
  border: 1.5px solid #5cb3cc;
  background: transparent;
  cursor: pointer;
  transition: 0.3s;
  font-family: "Josefin Sans Light", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "'Hiragino Sans GB", STHeiti, "Microsoft Yahei", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", Arial, Verdana, sans-serif;
}
main form .my-regis:hover {
  background: #5cb3cc;
  color: #f5f6fa;
  box-shadow: 0px 0px 10px #126e82;
}
main form .form-placeholder {
  flex: 0 auto ;
  min-height: 20% ;
  width: 100% ;
}
main .login-form {
  z-index: 0 ;
}
main .regis-form {
  z-index: -1;
}
.main-show {
  min-height: 100vh !important ;
  height: 100vh !important ;
  width: 100vw !important ;
  transform: scale(1) !important;
}
.box-change {
  transform: rotate(0deg) skewY(0deg) !important;
  transform: translateX(-80%) !important;
  box-shadow: 0px 0px 10px #636e72 !important;
  border-top-left-radius: 10px ;
  border-bottom-left-radius: 10px ;
}
.card-fake-change {
  width: 260% !important ;
  box-shadow: 0px 0px 10px #636e72 !important;
}
.card-regis-change {
  background-image: linear-gradient(125deg, #ffeaa7, #fab1a0, #ff7675 35%, #b0d5df, #8abcd1, #51c4d3, #1ba784) !important;
  color: #fef4f4 !important;
  background-repeat: no-repeat !important;
  background-size: 300% !important;
  transform: translateX(160%) !important;
  border-top-right-radius: 10px ;
  border-bottom-right-radius: 10px ;
  background-position: 100% 100%  !important;
  z-index: 1 ;
}
.card-login-change {
  background-image: linear-gradient(125deg, #ffeaa7, #fab1a0, #ff7675 50%, #8abcd1, #51c4d3, #1ba784) !important;
  color: #fef4f4 !important;
  background-repeat: no-repeat !important;
  background-size: 300% !important;
  background-position: 0 0 !important;
  border-top-left-radius: 10px ;
  border-bottom-left-radius: 10px ;
  z-index: 1 ;
}
.form-show {
  transform: scaleX(1) !important;
  border-radius: 0 ;
  border-top-right-radius: 10px ;
  border-bottom-right-radius: 10px ;
  left: 100% ;
}
.form-move {
  left: 0% ;
  border-radius: 0 ;
  border-top-left-radius: 10px ;
  border-bottom-left-radius: 10px ;
}
.box-show {
  opacity: 1 !important;
}
.box-use {
  transform: perspective(1000px) rotateZ(0deg) rotateX(0deg) rotateY(0deg);
  box-shadow: -25px 40px 4px rgba(0, 0, 0, 0.2);
}
.hiddenToTop {
  transform: translateY(-100%) !important;
}
.hiddenToBottom {
  transform: translateY(100%) !important;
}
.float-Sakura {
  animation-name: floatSakura ;
  animation-duration: 3s ;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-out;
  animation-play-state: running;
}
.scale-Sakura {
  animation-name: scaleSakura ;
  animation-duration: 3s ;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-out;
  animation-play-state: running;
}
@keyframes sp-float {
  0% {
    width: 0% ;
    height: 0% ;
    opacity: 0.5;
  }
  100% {
    width: 1000px ;
    height: 1000px ;
    opacity: 0 ;
  }
}
@keyframes floatSakura {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20%);
  }
  70% {
    transform: translateY(-30%);
  }
  100% {
    transform: translateY(-40%);
  }
}
@keyframes scaleSakura {
  0% {
    width: 150px ;
    height: 80px ;
    margin-left: -75px;
    margin-top: -35px;
  }
  50% {
    width: 120px ;
    height: 64px ;
    margin-left: -60px;
    margin-top: -32px;
  }
  70% {
    width: 105px ;
    height: 56px ;
    margin-left: -52.5px;
    margin-top: -28px;
  }
  100% {
    width: 90px ;
    height: 48px ;
    margin-left: -45px;
    margin-top: -24px;
  }
}
.wrench-use {
  -webkit-animation: wrench 8s ease infinite;
  animation: wrench 8s ease infinite;
  transform-origin: 60% 70%;
  animation-play-state: running;
}
@-webkit-keyframes wrench {
  0% {
    -webkit-transform: rotate(-4deg);
    transform: rotate(-4deg);
  }
  4% {
    -webkit-transform: rotate(4deg);
    transform: rotate(4deg);
  }
  10% {
    -webkit-transform: rotate(8deg);
    transform: rotate(8deg);
  }
  18%,
  20% {
    -webkit-transform: rotate(-8deg);
    transform: rotate(-8deg);
  }
  28%,
  30% {
    -webkit-transform: rotate(8deg);
    transform: rotate(8deg);
  }
  38%,
  40% {
    -webkit-transform: rotate(-8deg);
    transform: rotate(-8deg);
  }
  48%,
  50% {
    -webkit-transform: rotate(8deg);
    transform: rotate(8deg);
  }
  58%,
  60% {
    -webkit-transform: rotate(-8deg);
    transform: rotate(-8deg);
  }
  68% {
    -webkit-transform: rotate(8deg);
    transform: rotate(8deg);
  }
  100%,
  75% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
}
@keyframes wrench {
  0% {
    -webkit-transform: rotate(-4deg);
    -ms-transform: rotate(-4deg);
    transform: rotate(-4deg);
  }
  8% {
    -webkit-transform: rotate(4deg);
    -ms-transform: rotate(4deg);
    transform: rotate(4deg);
  }
  10% {
    -webkit-transform: rotate(8deg);
    -ms-transform: rotate(8deg);
    transform: rotate(8deg);
  }
  18%,
  20% {
    -webkit-transform: rotate(-8deg);
    -ms-transform: rotate(-8deg);
    transform: rotate(-8deg);
  }
  28%,
  30% {
    -webkit-transform: rotate(8deg);
    -ms-transform: rotate(8deg);
    transform: rotate(8deg);
  }
  38%,
  40% {
    -webkit-transform: rotate(-8deg);
    -ms-transform: rotate(-8deg);
    transform: rotate(-8deg);
  }
  48%,
  50% {
    -webkit-transform: rotate(8deg);
    -ms-transform: rotate(8deg);
    transform: rotate(8deg);
  }
  58%,
  60% {
    -webkit-transform: rotate(-8deg);
    -ms-transform: rotate(-8deg);
    transform: rotate(-8deg);
  }
  68% {
    -webkit-transform: rotate(8deg);
    -ms-transform: rotate(8deg);
    transform: rotate(8deg);
  }
  100%,
  75% {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
  }
}
